<template>
  <div class="container">
    <headComponent></headComponent>
    <div class="row">
      <div class="col-xs-6" style="padding-left: 0px">
          <img class="pull-right" src="src/assets/wkl.jpg" alt="" style="height: 600px;width: 505px;border: 3px #CECECE solid">
      </div>
      <div class="col-xs-6">
        <div class="row" style="margin-top: 40px">
          <div class="col-xs-4 text-right">
            <p style="font-size: 30px;font-weight: bold">物品名称:</p>
          </div>
          <div class="col-xs-8" style="padding-left: 5px">
            <p style="font-size: 30px">{{item.lostPropertyName}}</p>
          </div>
        </div>

        <div class="row" style="margin-top: 25px">
          <div class="col-xs-4 text-right">
            <p style="font-size: 30px;font-weight: bold">拾取时间:</p>
          </div>
          <div class="col-xs-8" style="padding-left: 5px">
            <p style="font-size: 30px">{{item.time}}</p>
          </div>
        </div>

        <div class="row" style="margin-top: 25px">
          <div class="col-xs-4 text-right">
            <p style="font-size: 30px;font-weight: bold">拾取地点:</p>
          </div>
          <div class="col-xs-8" style="padding-left: 5px">
            <p style="font-size: 30px">{{item.location}}</p>
          </div>
        </div>

        <div class="row" style="margin-top: 25px">
          <div class="col-xs-4 text-right">
            <p style="font-size: 30px;font-weight: bold">拾取人:</p>
          </div>
          <div class="col-xs-8" style="padding-left: 5px">
            <p style="font-size: 30px">{{info.name}}</p>
          </div>
        </div>

        <div class="row" style="margin-top: 25px">
          <div class="col-xs-4 text-right">
            <p style="font-size: 30px;font-weight: bold">联系方式:</p>
          </div>
          <div class="col-xs-8" style="padding-left: 5px">
            <p style="font-size: 30px">{{info.tel}}</p>
          </div>
        </div>

        <div class="row" style="margin-top: 25px">
          <p style="font-size: 30px;font-weight: bold;padding-left: 30px" >物品是否已经领取:</p>
          <el-switch
            v-model="value"
            active-color="#13ce66"
            inactive-color="#ff4949" style="margin-top: 15px;margin-left: 20px" v-on:change="claim">
          </el-switch>
        </div>
      </div>
    </div>

    <div class="row" style="margin-top: 10px">
      <div class="col-xs-6">
        <div class="row">
          <div class="col-xs-5 text-right" style="padding-right: 5px">
            <p style="font-size: 30px;font-weight: bold">物品详细描述:</p>
          </div>
          <div class="col-xs-7" style="padding-left: 10px;padding-top: 10px;">
            <p style="font-size: 20px;height: 300px;width: 230px;border: 1px #ECECEC solid">{{item.descript}}</p>
          </div>
        </div>
      </div>
      <div class="col-xs-6" style="margin-top: 80px">
        <div class="row">
          <div class="col-xs-5 text-right">
            <p style="font-size: 30px;font-weight: bold">认领人姓名:</p>
          </div>
          <div class="col-xs-7" style="padding-left: 0px">
            <input v-model="claimantName" type="text" placeholder="请输入您的名字" style="height: 30px;width: 220px;margin-top: 8px">
          </div>
        </div>

        <div class="row" style="margin-top: 20px">
          <div class="col-xs-5 text-right">
            <p style="font-size: 30px;font-weight: bold">认领人学号:</p>
          </div>
          <div class="col-xs-7" style="padding-left: 0px">
            <input v-model="claimantStuNo" type="text" placeholder="请输入您的学号" style="height: 30px;width: 220px;margin-top: 8px">
          </div>
        </div>

        <div class="row" style="margin-top: 20px">
          <div class="col-xs-5 text-right">
            <p style="font-size: 30px;font-weight: bold">认领人电话:</p>
          </div>
          <div class="col-xs-7" style="padding-left: 0px">
            <input v-model="claimantTel" type="text" placeholder="请输入您的联系方式" style="height: 30px;width: 220px;margin-top: 8px">
          </div>
        </div>
      </div>
    </div>

    <div class="row" style="margin-top: 30px">
      <div class=" col-xs-12 text-center">
        <router-link to="/foundManagementPage">
        <button type="button" class="btn btn-danger" style="font-size: 30px;font-weight: bold">返&nbsp;&nbsp;&nbsp;&nbsp;回</button>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "foundGoodsDetailsPage",
      data() {
        return {
          item:this.$route.params.item,
          info:{},
          value: false,
          claimantName:"",
          claimantStuNo:"",
          claimantTel:''
        }
      },
      created() {
        var self=this
        axios.get(this.rootUrl+"/info/userInfo",{
          params:{userId:this.$route.params.item.userId}

        })
          .then(function (resp) {
            console.log(resp.data)
            self.info=resp.data
          })
      },
      methods:{
        claim:function () {
          if (this.claimantName==''){
            this.value=false;
            alert('请输入认领人的名字');
            return;
          }
          if (this.claimantStuNo==''){
            this.value=false;
            alert('请输入认领人的学号');
            return;
          }
          if (this.claimantStuNo.length!=9){
            this.value=false;
            alert('学号输入不正确');
            return;
          }
          if (this.claimantTel==''){
            this.value=false;
            alert('请输入认领人的联系方式');
            return;
          }
          if (this.claimantTel.length!=11){
            this.value=false;
            alert('电话输入不正确');
            return;
          }
        }
      }
    }
</script>

<style scoped>

</style>
